<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>03-复合属性</title>
  <style>
    .outer{
      width: 1300px;
      height: 200px;
      border: solid black 1px;
    }
    .inner{
      width: 200px;
      height: 200px;
      background-color: skyblue;
      animation: wangyouyi 3s 0.2s alternate-reverse linear 2 forwards;

    }

    .outer:hover .inner{
      /* 当鼠标在outer属性下，动画不再播放 */
      /* 动画的播放状态 */
      animation-play-state: paused;
    }
    @keyframes wangyouyi {
      0%{

      }
      100%{
        transform: translate(1100px) rotate(360deg);
        border-radius: 50%;
        background-color: purple; 

      }
    }
  </style>
</head>
<body>
  <div class="outer">
    <div class="inner"></div>
  </div>
  
</body>
</html>